<template>
	<view class="Global">


		<bgImage></bgImage>

		<MyNav :title="title" bgColor="" :backIcon="isback" id="main"></MyNav>


		<scroll-view scroll-y="true" class="contentScroll" :style="'height:'+scrollViewHeight+'px'">
			<view class="ContentScrollInner">

				<view class="contentTop">

					<view class="contentItem2">
						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">基本信息</text>
						</view>
					</view>
					<view class="dotted-line"></view>
					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">姓名</text>
						</view>

						<view class="contentItemRightContent">
							<text class="contentItemTextLeft">{{user.nickName}}</text>

						</view>

					</view>

					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">部门</text>

						</view>

						<view class="contentItemRightContent">
							<text class="contentItemTextLeft">{{user.dept.deptName==null?'':user.dept.deptName}}</text>
						</view>

					</view>
					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">工号</text>
						</view>

						<view class="contentItemRightContent">
							<text class="contentItemTextLeft">{{user.phonenumber}}</text>
						</view>

					</view>

				</view>

				<view class="contentTop">
					<view class="contentItem2">
						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">人脸信息</text>
						</view>
					</view>
					<view class="dotted-line"></view>
					<view class="contentItem2" v-if="listData==null || listData.length==0">
						<view class="contentItemTextLeftContent" @click="chooseImage()">
<!--							<text class="contentScrollItemRightText">人脸录入</text>-->
              <image class="contentImgAdd" src="../../../static/gongzuotai/shangchuan.png" mode="">
              </image>
						</view>
					</view>
					<view v-else class="contentItem2" style="height: 300rpx">
						<view class="contentItemTextLeftContent" v-for="(item,index) in listData">
							<image style="width: 200rpx;height: 200rpx" :src="apiUrl+item.imgUrl"></image>

						</view>
						<view class="contentItemRightContent">
							<text class="contentScrollItemRightText" @click="delUserFace(listData[0])">删除人脸</text>
						</view>
					</view>
				</view>

			</view>
		</scroll-view>


	<view class="loginContent" id="mainBottom"></view>

	</view>


</template>

<script>
	import MyNav from '@/components/customnavbar.vue'

	import bgImage from '@/components/backgroundImage.vue'
	import {
    userFaceList,addUserFace,delUserFace
	} from "@/pages/api/api.js";
  import config from "@/pages/api/config";


	export default {
		components: {
			MyNav,
			bgImage,

		},
		data() {
			return {
				title: '人员详情',
				isback: true,

				login: '下一步',
        apiUrl: config.apiUrl,

				// 设备打卡 开关
				deviceSwitch: false,

				// GPS开关
				GPSDeviceSwitch: false,

				// WIFI开关
				WIFIDeviceSwitch: false,

				// 外勤打卡开关
				outsideDeviceSwitch: false,

				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,
				workTimeId: 0,
				user: {},
				dept: {},
        listData: [],
			}
		},
		onLoad: function(option) {
			this.user = JSON.parse(decodeURIComponent(option.user));
      if(this.user.imgUrl==undefined || this.user.imgUrl==null){
        this.user.imgUrl = [];
      }
			console.info('user', this.user)
			// this.dept = this.user.dept
		},
		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top

				// console.log('1底部距离', this.mainTop);

				// 在其他页面或组件中访问
				// const app = getApp();
				// this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
				// 	.totalHeight


				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();
			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);

				this.scrollViewHeight = this.bottomTop - this.mainTop - 80
				// console.log('可滚动距离', this.scrollViewHeight);
			}).exec();


		},
		methods: {
      userFaceList(){
        let data = {
          userId: this.user.userId,
          storeId: this.user.storeId,
          tenantId: this.user.tenantId
        }
        userFaceList(data).then(res=>{
          if(res.code==200){
            this.listData = res.data;
          }
        })
      },
			// 列表点击事件
			listItemClick(e) {

				this.open(e)
			},
			// 打开弹框
			open(e) {
				// console.log('点了');
				this.$refs.popupBag.open('bottom')
				console.log('列表点击事件', e);
				this.listItemData = e
			},
      chooseImage() {
        let url = config.apiUrl
        console.log('url', url)
        let that = this
        uni.chooseImage({
          count: 1,
          // sizeType压缩图片
          sizeType: "compressed",
          success: (res) => {
            // this.imgArr =[...this.imgArr, res.tempFilePaths]
            // this.imgArr = this.imgArr.concat(res.tempFilePaths);
            console.log('xxxxxxxxx', res)
            uni.uploadFile({
              url: url + '/common/upload',
              filePath: res.tempFilePaths[0],
              name: 'file',
              formData: {},
              header: {
                'Content-Type': 'multipart/form-data', // 对于文件上传，这个通常需要设置
                'Authorization': uni.getStorageSync('token') // 添加你的token头部参数
              },
              success: (res) => {
                console.log('图片上传', res)
                let obj = JSON.parse(res.data);
                console.log('obj', obj)
                if (obj.code == 200) {
                  // img = obj.fileName
                  that.listData.push(obj.fileName);
                  console.log('imgArr', that.listData)
                }
              },
              fail: (error) => {
                console.log('图片上传失败', error)
                uni.showToast({
                  title: '图片上传失败',
                  icon: 'none'
                });
              }
            })
          }
        })

      },
      addUserFace(){
        let data = {
          userId: this.user.userId,
          imgUrl: this.listData[0],
          storeId: this.user.storeId,
          tenantId: this.user.tenantId,
        }
        addUserFace(data).then(res=>{
          if(res.code==200){
            uni.showToast({
              title: '新增成功',
              icon: 'none'
            });
            this.userFaceList()
          }else {
            uni.showToast({
              title: '删除失败',
              icon: 'error'
            });
          }
        })
      },
      delUserFace(item){

        uni.showModal({
          title: '提示',
          content: '是否删除该订单',
          showCancel: true,
          success: (res) => {
            if (!res.confirm) {
              return
            }
            delUserFace(item.id).then(res=>{
              if(res.code==200){
                uni.showToast({
                  title: '删除成功',
                  icon: 'none'
                });
                this.userFaceList()
              }else {
                uni.showToast({
                  title: '删除失败',
                  icon: 'error'
                });
              }
            })
          }
        })
      },
		}
	}
</script>

<style>
  .contentImgAdd {
    width: 40rpx;
    height: 40rpx;
  }
	.ContentScrollInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.contentScroll {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		margin-top: 30rpx;
		height: 600rpx;
	}

	.contentScrollItemRightText {

		display: flex;
		align-items: center;
		justify-content: center;

		width: 142rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2px solid #0081FF;



		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #0081FF;


		margin-left: 20rpx;
	}

	.dotted-line {
		border-top: 1px dashed #a6adb6;
		/* 虚线的颜色和宽度 */
		/*margin: 10px 0; !* 上下边距 *!*/
		width: 100%;
		/* 虚线的宽度 */
	}

	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;

		position: absolute;
		bottom: 30rpx;
	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 110rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}

	.selectDeviceContentTextColor {
		display: flex;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		align-items: center;
		height: 100%;
	}

	.selectDeviceContentText {
		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #0081FF;
		align-items: center;
		height: 100%;
	}

	.selectDeviceContentImg {
		display: flex;
		align-items: center;
		width: 40rpx;
		height: 40rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.selectDeviceContent {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 80rpx;
		width: 100%;


	}

	.contentBottom {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 690rpx;
		height: 661rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	.ContentSelectN {

		display: flex;


		background: #FFFFFF;
		border-radius: 16rpx;
		border: 1px solid #999999;
		background: #EEEEEE;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		margin-left: 10rpx;

	}

	.ContentSelectY {
		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 5rpx;
		padding-bottom: 5rpx;

		background: #EEEEEE;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 16rpx;
		margin-left: 30rpx;
	}

	.ContentSelect {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;

	}

	.contentItemTextLeftContent {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.contentItemRightContentSwitchImg {
		display: flex;

		width: 80rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.contentItemRightContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		margin-right: 30rpx;
	}

	.contentItemTextRight {
		font-size: 28rpx;
		font-weight: 600;
		color: #666666;
		margin-right: 30rpx;
		width: 200rpx;
		text-align: right;
	}

	.contentItemTextLeftStart {
		color: red;
	}

	.contentItemRightContentImg {
		width: 20rpx;
		height: 10rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;

	}

	.contentItemTextLeft {
		font-size: 28rpx;
		font-weight: 600;
		color: black;
		margin-left: 30rpx;
	}

	.contentItem2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 690rpx;
		height: 120rpx;

		border-bottom: #F9FCFF solid 1rpx;

		/* background-color: aqua; */
	}



	.contentTop {

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		margin-top: 30rpx;
		width: 690rpx;
		/*height: 541rpx;*/
		background: #FFFFFF;
		border-radius: 30rpx;


	}
</style>
